<template>
  <el-card>
    <el-table border style="margin: 10px 0" :data="skuList">
      <el-table-column
        type="index"
        width="80"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        label="名称"
        width="150"
        prop="skuName"
      ></el-table-column>
      <el-table-column
        label="描述"
        width="200"
        prop="skuDesc"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="默认图片">
        <template #default="{ row }">
          <el-image
            :src="row.skuDefaultImg"
            style="width: 100px; height: 100px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="重量(g)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" fixed="right" width="250">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="top"
            title="上架"
            v-if="row.isSale == 0"
            @click="saleSku(row.id)"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            icon="Bottom"
            title="下架"
            v-if="row.isSale == 1"
            @click="cancelSale(row.id)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            title="编辑"
            icon="edit"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            title="详情"
            icon="info-filled"
            @click="detail(row)"
          ></el-button>
          <el-popconfirm
            :title="`确定删除${row.skuName}吗？`"
            width="210"
            @confirm="deleteSku(row.id)"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                icon="delete"
                title="删除"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9, 12]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next, jumper, ->,sizes, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <el-drawer v-model="skuDetailDrawer">
    <template #header>
      <h4>查看商品详情</h4>
    </template>
    <template #default>
      <div>
        <el-row class="sku-row">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">
            {{ skuDetail.skuName }}
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">
            {{ skuDetail.skuDesc }}
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">重量(g)</el-col>
          <el-col :span="18">
            {{ skuDetail.weight }}
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">价格(元)</el-col>
          <el-col :span="18">
            {{ skuDetail.price }}
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px 5px"
              v-for="item in skuDetail.skuAttrValueList"
              :key="item.attrId"
            >
              {{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px 5px"
              v-for="item in skuDetail.skuSaleAttrValueList"
              :key="item.saleAttrValueId"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row class="sku-row">
          <el-col :span="6">图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in spuImageList" :key="item">
                <img :src="item.imgUrl" alt="" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="index">
//分页数据
import { onMounted, ref } from 'vue'
import {
  reqGetSkuList,
  reqOnSale,
  reqCancelSale,
  reqDeleteSku,
  reqGetSkuDetail,
} from '@/api/product/sku'
import { reqGetSpuSaleAttrList, reqGetSpuImageList } from '@/api/product/spu'
import type { SkuResponseData, SkuData } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(3)
const total = ref(0)
const size = ref('small')
const disabled = ref(false)
const background = ref(true)

//详情抽屉
const skuDetailDrawer = ref(false)
//sku详情
const skuDetail = ref<SkuData>({
  spuId: '',
  skuName: '',
  skuDesc: '',
  weight: 0,
  price: 0,
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
})
//sku分页数据
const skuList = ref<SkuData[]>([])
let skuSaleAttrList = ref<any>([])
let spuImageList = ref<any>([])

const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`)
  getSkuList()
}
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  getSkuList(val)
}
const getSkuList = async (page: number = 1) => {
  currentPage.value = page
  const res: SkuResponseData = await reqGetSkuList(
    currentPage.value,
    pageSize.value,
  )
  console.log('res==>', res)
  if (res.code == 200) {
    skuList.value = res.data.records
    total.value = res.data.total
  }
}
onMounted(() => {
  getSkuList()
})

//上架
const saleSku = async (skuId: number) => {
  const res = await reqOnSale(skuId)
  if (res.code == 200) {
    ElMessage.success('上架成功')
    await getSkuList()
  } else {
    ElMessage.error('上架失败')
  }
}
//下架
const cancelSale = async (skuId: number) => {
  const res = await reqCancelSale(skuId)
  if (res.code == 200) {
    ElMessage.success('下架成功')
    await getSkuList()
  } else {
    ElMessage.error('下架失败')
  }
}
//查详情
const detail = async (row: SkuData) => {
  console.log('详情==>', row)
  skuDetailDrawer.value = true
  //获取销售属性
  let res2 = await reqGetSpuSaleAttrList(row.spuId as number)
  if (res2.code === 200) {
    console.log('获取销售属性值成功', res2.data)
    skuSaleAttrList.value = res2.data
  }
  //获取spu图片
  let res3 = await reqGetSpuImageList(row.spuId as number)
  if (res3.code === 200) {
    console.log('获取图片成功', res3.data)
    spuImageList.value = res3.data
  }
  //获取sku详情
  let res4 = await reqGetSkuDetail(row.id as number)
  if (res4.code === 200) {
    console.log('获取sku详情成功', res4.data)
    skuDetail.value = res4.data
  }
}
//删除
const deleteSku = async (skuId: number) => {
  const res = await reqDeleteSku(skuId)
  if (res.code == 200) {
    ElMessage.success('删除成功')
    await getSkuList()
  } else {
    ElMessage.error('删除失败')
  }
}
</script>

<style scoped lang="scss">
.sku-row {
  margin-bottom: 15px;
}
</style>
